<!--
 * @Author: MuQuanyu(MQy)
 * @Date: 2025-10-15 15:16:44
 * @LastEditTime: 2025-10-17 09:00:03
 * @email: muquanyu@outlook.com
-->
<template>
  <div style="overflow: hidden;">
    <el-dropdown popper-class="custom-dropdown" trigger="click">
      <slot></slot>
      <template #dropdown>
        <div class="icon-picker-box">
          <el-input v-model="searchKey" @input="search" placeholder="搜索图标" clearable></el-input>
          <div class="icon-list-box">
            <div @click="handleClickIcon(iconItem)" class="icon-box" v-for="iconItem in currentIconList">
              <i style="font-size: 18px;" :class="iconItem"></i>
            </div>
          </div>
          <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 10px; ">
            总页数：{{ pageObj.pages }}
          </div>
          <div class="bottom-box">
            <el-button @click="prePage" style="width: 25%;"><el-icon>
                <ArrowLeftBold />
              </el-icon></el-button>
            <el-input @input="inputPage" class="center-input" v-model="pageObj.page"
              style="text-align: center;"></el-input>
            <el-button @click="nextPage" style="width: 25%;">
              <el-icon>
                <ArrowRightBold />
              </el-icon>
            </el-button>
          </div>
        </div>
      </template>
    </el-dropdown>

  </div>

</template>

<script setup lang="ts">
import freeFontawesomeList from "@/assets/json/fontawesome-icons.json";
import { onMounted, ref, watch } from "vue";
const emits = defineEmits(["handle-click-icon"])
const currentIconList = ref<any>([])
const searchKey = ref("")
const staticFreeFontawesomeList = ref<any>(freeFontawesomeList)
const search = () => {
  if (searchKey.value.trim() != '') {
    staticFreeFontawesomeList.value = []
    freeFontawesomeList.forEach((x: any) => {
      if (x.includes(searchKey.value))
        staticFreeFontawesomeList.value.push(x)
    });
  } else {
    staticFreeFontawesomeList.value = freeFontawesomeList
  }
  pageObj.value.pages = Math.ceil(staticFreeFontawesomeList.value.length / 20)
  pageObj.value.total = staticFreeFontawesomeList.value.length
  currentIconList.value = staticFreeFontawesomeList.value.slice((pageObj.value.page - 1) * pageObj.value.pageSize,
    pageObj.value.page * pageObj.value.pageSize)
}
const pageObj = ref({
  page: 1,
  pageSize: 20,
  total: staticFreeFontawesomeList.value.length,
  pages: Math.ceil(staticFreeFontawesomeList.value.length / 20)
})
const inputPage = () => {
  const regex = /^[1-9]\d*$/;
  if (!regex.test(pageObj.value.page.toString())) {
    pageObj.value.page = 1
  }
  console.log(pageObj.value.page)
  if (pageObj.value.page > pageObj.value.pages) pageObj.value.page = pageObj.value.pages
  currentIconList.value = staticFreeFontawesomeList.value.slice((pageObj.value.page - 1) * pageObj.value.pageSize,
    pageObj.value.page * pageObj.value.pageSize)

}
const prePage = () => {
  pageObj.value.page = pageObj.value.page - 1 <= 0 ? 1 : pageObj.value.page - 1
  currentIconList.value = staticFreeFontawesomeList.value.slice((pageObj.value.page - 1) * pageObj.value.pageSize,
    pageObj.value.page * pageObj.value.pageSize)
}
const nextPage = () => {
  pageObj.value.page = pageObj.value.page + 1 > pageObj.value.pages ? pageObj.value.pages : pageObj.value.page + 1
  currentIconList.value = staticFreeFontawesomeList.value.slice((pageObj.value.page - 1) * pageObj.value.pageSize,
    pageObj.value.page * pageObj.value.pageSize)
}
const handleClickIcon = (item: any) => {
  emits("handle-click-icon", item)
}
onMounted(() => {
  currentIconList.value = staticFreeFontawesomeList.value.slice((pageObj.value.page - 1) * pageObj.value.pageSize,
    pageObj.value.page * pageObj.value.pageSize)
})
</script>

<style lang="scss" scoped>
.icon-picker-box {
  display: flex;
  flex-direction: column;
  width: 250px;


  .icon-list-box {
    overflow-y: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    height: 120px;
    padding: 5px;

    .icon-box {
      border: 1px solid;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .icon-box:hover {
      background: var(--el-color-primary-light-7);
      border-color: var(--el-color-primary);
    }
  }

  .bottom-box {
    display: flex;

    border: 1px solid var(--el-border-color);
  }
}




.center-input {
  ::v-deep(.el-input__inner) {
    text-align: center;
  }
}
</style>
